<template>
  <div class="calendar-dashboard">
    <div class="dashboard-header">
      <div class="header-title">
        <h1>日历日程</h1>
        <p class="subtitle">高效规划您的工作与生活</p>
      </div>
    </div>

    <div class="dashboard-body">
      <div class="left-area">
        <CalendarView />
        <ScheduleList />
      </div>

      <div class="right-area">
        <ScheduleForm/>
        <ScheduleStats />
      </div>
    </div>
  </div>
</template>

<script>
import CalendarView from '@/components/dates/CalendarView.vue';
import ScheduleList from '@/components/dates/ScheduleList.vue';
import ScheduleStats from '@/components/dates/ScheduleStats.vue';
import ScheduleForm from '@/components/dates/ScheduleForm.vue'

export default {
  name: 'Dates',
  components: {
    ScheduleForm,
    CalendarView,
    ScheduleList,
    ScheduleStats
  },
};
</script>

<style lang="less" scoped>
.calendar-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;

  .dashboard-header {
    margin-bottom: 25px;

    .header-title {
      h1 {
        margin: 0 0 10px 0;
        font-size: 38px;
        color: #303133;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .subtitle {
        font-size: 16px;
        color: #86909c;
        margin-top: 5px ;
      }
    }
  }

  .dashboard-body {
    display: flex;
    gap: 25px;

    .left-area {
      flex: 7;
      display: flex;
      flex-direction: column;
      gap: 25px;
    }

    .right-area {
      flex: 3;
      display: flex;
      flex-direction: column;
      gap: 25px;
    }
  }
}
</style>
